<template>
	<drawer ref="drawer" :show="show" @close="show = false" :showTimeSelect="selectTimePopup" @closeSelect="closeSelectTimePopup" @cancel="cancel"
		@confirm="confirm" :cancelEvent="false" :title="'筛选'" cancelText="重置">
		<view class="filter-content">

			<!-- 报警时间 -->
			<view class="filter-item">
				<view class="filter-item-label">报警时间</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedAlarmTime === '' }" @click="selectAlarmTimeAll">全部
					</view>
					<view v-for="item in alarmTimeOptions" :key="item.value" class="tag"
						:class="{ active: selectedAlarmTime === item.value }" @click="selectAlarmTimeItem(item.value)">
						{{ item.label }}</view>
					<view class="tag" :class="{ active: selectedAlarmTime === 'other' }" @click="openTimeSelect">自定义
					</view>
					<view v-if="selectedAlarmTime === 'other'" class="time-range">
						<view class="time-range-item">{{ timeVals.length ? timeVals[0] : '开始时间' }}</view>
						<view>-</view>
						<view class="time-range-item">{{ timeVals.length ? timeVals[1] : '结束时间' }}</view>
					</view>

				</view>
			</view>
			<!-- 报警来源 -->
			<view class="filter-item">
				<view class="filter-item-label">报警来源</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedAlarmSource === '' }" @click="selectAlarmSourceAll">全部
					</view>
					<view v-for="item in alarmSourceOptions" :key="item.value" class="tag"
						:class="{ active: selectedAlarmSource === item.value }"
						@click="selectAlarmSourceItem(item.value)">{{ item.label }}</view>
				</view>
			</view>
			<!-- 确认状态 -->
			<view class="filter-item" v-if="type == 'confirmed' || type == 'all'">
				<view class="filter-item-label">确认状态</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedWarningTags.length === 0 }"
						@click="selectWarningTagsAll">全部</view>
					<view v-for="item in warningTagOptions" :key="item.value" class="tag"
						:class="{ active: selectedWarningTags.includes(item.value) }"
						@click="selectWarningTagItem(item.value)">{{ item.label }}</view>
				</view>
			</view>

			<!-- 误报确认 -->
			<view class="filter-item" v-if="type == 'confirmed' || type == 'all'">
				<view class="filter-item-label">误报确认</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedFalseAlarm.length === 0 }" @click="selectFalseAlarmAll">
						全部</view>
					<view v-for="item in falseAlarmOptions" :key="item.value" class="tag"
						:class="{ active: selectedFalseAlarm.includes(item.value) }"
						@click="selectFalseAlarmItem(item.value)">{{ item.label }}</view>
				</view>
			</view>

			<!-- 是否关联工单 -->
			<view class="filter-item" v-if="type == 'confirmed' || type == 'all'">
				<view class="filter-item-label">是否关联工单</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedDispatchStatus === '' }"
						@click="selectDispatchStatusAll">全部</view>
					<view v-for="item in dispatchStatusOptions" :key="item.value" class="tag"
						:class="{ active: selectedDispatchStatus === item.value }"
						@click="selectDispatchStatusItem(item.value)">{{ item.label }}</view>
				</view>
			</view>
			<!-- 救援工单状态 -->
			<view class="filter-item" v-if="type == 'confirmed' || type == 'all'">
				<view class="filter-item-label">救援工单状态</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedOrderStatus.length === 0 }"
						@click="selectOrderStatusAll">全部</view>
					<view v-for="item in orderStatusOptions" :key="item.value" class="tag"
						:class="{ active: selectedOrderStatus.includes(item.value) }"
						@click="selectOrderStatusItem(item.value)">{{ item.label }}</view>
				</view>
			</view>
			<!-- 角维修工单专改 -->
			<view class="filter-item" v-if="type == 'confirmed' || type == 'all'">
				<view class="filter-item-label">维修工单状态</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedRepairOrderStatus === '' }"
						@click="selectRepairOrderStatusAll">全部</view>
					<view v-for="item in repairOrderStatusOptions" :key="item.value" class="tag"
						:class="{ active: selectedRepairOrderStatus === item.value }"
						@click="selectRepairOrderStatusItem(item.value)">{{ item.label }}</view>
				</view>
			</view>

			<!-- 是否确认超时 -->
			<view class="filter-item" v-if="type == 'pending'">
				<view class="filter-item-label">是否确认超时</view>
				<view class="filter-item-content tag-group">
					<view class="tag" :class="{ active: selectedTimeoutStatus === '' }" @click="selectTimeoutStatusAll">
						全部</view>
					<view v-for="item in timeoutStatusOptions" :key="item.value" class="tag"
						:class="{ active: selectedTimeoutStatus === item.value }"
						@click="selectTimeoutStatusItem(item.value)">{{ item.label }}</view>
				</view>
			</view>

			<!-- 是否确认超时 -->
		</view>
 
	</drawer>
</template>
<script>
import drawer from '@/components/filter-drawer/drawer.vue';
import dayjs from 'dayjs';
export default {
	components: { drawer },
	props: {
		type: {
			type: String,
			default: '请选择'
		},
		title: {
			type: String,
			default: '请选择'
		},
	},
	data() {
		return {
			selectTimePopup: false,
			// 确认状态标签
			warningTagOptions: [
				{ label: '待确认', value: '0' },
				{ label: '已确认', value: '1' },
			],
			selectedWarningTags: [],
			// 是否关联工单
			dispatchStatusOptions: [
				{ label: '是', value: '1' },
				{ label: '否', value: '2' },
			],
			selectedDispatchStatus: '',
			// 工单状态
			orderStatusOptions: [
				{ label: '调度中', value: 1 },
				{ label: '已出发', value: 3 },
				{ label: '已到达', value: 4 },
				{ label: '已救援', value: 5 },
			],
			selectedOrderStatus: [],
			// 维修工单状态
			repairOrderStatusOptions: [
				{ label: '待开始', value: 2 },
				{ label: '维修中', value: 3 },
				{ label: '已完成', value: 4 },
			],
			selectedRepairOrderStatus: '',
			// 报警时间
			alarmTimeOptions: [
				{ label: '今天', value: 'day' },
				{ label: '本周', value: 'week' },
				{ label: '本月', value: 'month' },
			],
			timeVals: [],
			selectedAlarmTime: '',
			// 报警来源
			alarmSourceOptions: [
				{ label: '物联网', value: '0' },
				{ label: '梯联网', value: '99' },
				{ label: 'AI客服', value: '100' },
			],
			selectedAlarmSource: '',
			// 误报确认
			falseAlarmOptions: [
				{ label: '准确无误', value: 1 },
				{ label: '误报', value: 2 },
				{ label: '无法确认', value: 3 },
			],
			selectedFalseAlarm: [],
			// 是否确认超时
			timeoutStatusOptions: [
				{ label: '是', value: '1' },
				{ label: '否', value: '2' },
			],
			selectedTimeoutStatus: '',
			show:false,
		};
	},
	created() {
		this.getTrapFroms();
	},
	methods: {

		closeSelectTimePopup(res) {
			console.log(res);

			if (res) {
				// res: 2025.07.17-2025.07.18
				let start = '';
				let end = '';
				if (res.indexOf('-') !== -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replace(/\./g, '-') + ' 00:00:00';
					end = timeArr[1].replace(/\./g, '-') + ' 23:59:59';
				} else {
					const time = res.replace(/\./g, '-');
					start = time + ' 00:00:00';
					end = time + ' 23:59:59';
				}
				const dateArr = [start, end];
				this.selectedAlarmTime = 'other';
				this.timeVals = dateArr;
				console.log('日期数组:', dateArr);
				// 你可以在这里使用 dateArr
			}
			this.selectTimePopup = false;
		},

		openTimeSelect() {
			this.selectTimePopup = true;
		},
		getTrapFroms() {

		},
		open(filterData) {
			// 回显筛选项
			if (filterData) {
				if (Array.isArray(filterData.warningTags)) this.selectedWarningTags = [...filterData.warningTags];
				// 是否关联工单单选回显
				if (typeof filterData.dispatchStatus === 'string' || typeof filterData.dispatchStatus === 'number') {
					this.selectedDispatchStatus = String(filterData.dispatchStatus);
				} else {
					this.selectedDispatchStatus = '';
				}
				if (Array.isArray(filterData.orderStatus)) this.selectedOrderStatus = [...filterData.orderStatus];
				if (typeof filterData.alarmTime === 'string') this.selectedAlarmTime = filterData.alarmTime;
				if (typeof filterData.alarmSource === 'string' || typeof filterData.alarmSource === 'number') {
					this.selectedAlarmSource = String(filterData.alarmSource);
				} else {
					this.selectedAlarmSource = '';
				}
				if (Array.isArray(filterData.falseAlarm)) this.selectedFalseAlarm = [...filterData.falseAlarm];
				// 新增维修工单状态回显
				if (typeof filterData.repairOrderStatus === 'string' || typeof filterData.repairOrderStatus === 'number') {
					this.selectedRepairOrderStatus = String(filterData.repairOrderStatus);
				} else {
					this.selectedRepairOrderStatus = '';
				}
				// 是否确认超时回显
				if (typeof filterData.timeoutStatus === 'string' || typeof filterData.timeoutStatus === 'number') {
					this.selectedTimeoutStatus = String(filterData.timeoutStatus);
				} else {
					this.selectedTimeoutStatus = '';
				}
			}
			this.show = true;
		},
		confirm() {
			// 收集所有筛选项的值，包括自定义日期
			const filterData = {
				warningTags: this.selectedWarningTags,
				// 单选
				dispatchStatus: this.selectedDispatchStatus,
				orderStatus: this.selectedOrderStatus,
				alarmTime: this.selectedAlarmTime,
				// 单选
				alarmSource: this.selectedAlarmSource,
				falseAlarm: this.selectedFalseAlarm,
				// 新增自定义日期区间
				timeVals: this.timeVals,
				// 角维修工单专改
				repairOrderStatus: this.selectedRepairOrderStatus,
				// 是否确认超时
				timeoutStatus: this.selectedTimeoutStatus,
			};

			this.$emit('confirm', filterData);
			this.show = false;
		},
		cancel() {
			// 重置所有筛选项为“全部”状态
			this.selectedWarningTags = [];
			this.selectedDispatchStatus = '';
			this.selectedOrderStatus = [];
			this.selectedAlarmTime = '';
			this.timeVals = [];
			this.selectedAlarmSource = '';
			this.selectedFalseAlarm = [];
			this.selectedRepairOrderStatus = '';
			this.selectedTimeoutStatus = '';
		},
		// 预警标签
		selectWarningTagsAll() {
			this.selectedWarningTags = [];
		},
		selectWarningTagItem(value) {
			const idx = this.selectedWarningTags.indexOf(value);
			if (idx > -1) {
				this.selectedWarningTags.splice(idx, 1);
			} else {
				this.selectedWarningTags.push(value);
			}
		},
		// 是否关联工单
		selectDispatchStatusAll() {
			this.selectedDispatchStatus = '';
		},
		selectDispatchStatusItem(value) {
			if (this.selectedDispatchStatus === value) {
				this.selectedDispatchStatus = '';
			} else {
				this.selectedDispatchStatus = value;
			}
		},
		// 工单状态
		selectOrderStatusAll() {
			this.selectedOrderStatus = [];
		},
		selectOrderStatusItem(value) {
			const idx = this.selectedOrderStatus.indexOf(value);
			if (idx > -1) {
				this.selectedOrderStatus.splice(idx, 1);
			} else {
				this.selectedOrderStatus.push(value);
			}
		},
		// 角维修工单专改
		selectRepairOrderStatusAll() {
			this.selectedRepairOrderStatus = '';
		},
		selectRepairOrderStatusItem(value) {
			if (this.selectedRepairOrderStatus === value) {
				this.selectedRepairOrderStatus = '';
			} else {
				this.selectedRepairOrderStatus = value;
			}
		},
		// 报警时间（单选）
		selectAlarmTimeAll() {
			this.selectedAlarmTime = '';
		},
		selectAlarmTimeItem(value) {
			if (this.selectedAlarmTime === value) {
				this.selectedAlarmTime = '';
				this.timeVals = [];
			} else {
				this.selectedAlarmTime = value;
				if (value === 'day') {
					const today = dayjs().format('YYYY-MM-DD');
					this.timeVals = [
						today + ' 00:00:00',
						today + ' 23:59:59'
					];
				} else if (value === 'week') {
					const startOfWeek = dayjs().startOf('week').format('YYYY-MM-DD');
					const endOfWeek = dayjs().endOf('week').format('YYYY-MM-DD');
					this.timeVals = [
						startOfWeek + ' 00:00:00',
						endOfWeek + ' 23:59:59'
					];
				} else if (value === 'month') {
					const startOfMonth = dayjs().startOf('month').format('YYYY-MM-DD');
					const endOfMonth = dayjs().endOf('month').format('YYYY-MM-DD');
					this.timeVals = [
						startOfMonth + ' 00:00:00',
						endOfMonth + ' 23:59:59'
					];
				} else {
					this.timeVals = [];
				}
			}
		},
		// 报警来源
		selectAlarmSourceAll() {
			this.selectedAlarmSource = '';
		},
		selectAlarmSourceItem(value) {
			if (this.selectedAlarmSource === value) {
				this.selectedAlarmSource = '';
			} else {
				this.selectedAlarmSource = value;
			}
		},
		// 误报确认
		selectFalseAlarmAll() {
			this.selectedFalseAlarm = [];
		},
		selectFalseAlarmItem(value) {
			const idx = this.selectedFalseAlarm.indexOf(value);
			if (idx > -1) {
				this.selectedFalseAlarm.splice(idx, 1);
			} else {
				this.selectedFalseAlarm.push(value);
			}
		},
		// 是否确认超时
		selectTimeoutStatusAll() {
			this.selectedTimeoutStatus = '';
		},
		selectTimeoutStatusItem(value) {
			if (this.selectedTimeoutStatus === value) {
				this.selectedTimeoutStatus = '';
			} else {
				this.selectedTimeoutStatus = value;
			}
		},
	}
};
</script>
<style lang="scss" scoped>
.filter-content {
	padding: 0 30rpx;

	.filter-item {
		color: #333;
		padding: 15rpx 0;

		&-label {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 16rpx;

			text {
				color: #999;
				font-weight: normal;
			}
		}
	}
}

.tag-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.tag {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc((100% - 40rpx) / 3); // 3个一行，间隔20rpx
	height: 48rpx;
	margin: 0 20rpx 20rpx 0;
	border: 2rpx solid #ccc;
	border-radius: 8rpx;
	color: #666;
	background: #fff;
	font-size: 28rpx;
	transition: all 0.2s;
	padding-bottom: 2rpx;
}

// 最后一行最后一个不右边距
.tag:nth-child(3n) {
	margin-right: 0;
}

.tag.active {
	border-color: #0091FF;
	color: #0091FF;
}

.label-margin-fix {
	margin-bottom: 2rpx !important;
	padding-top: 16rpx;
}

.time-range {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.time-range-item {
		width: 320rpx;
		height: 1px;
		background: #ccc;
		height: 48rpx;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		color: #666;
		line-height: 48rpx;
		text-align: center;
		background: #fff;
		font-size: 28rpx;
	}

	.line {
		font-size: 30rpx;
		color: #666;
	}
}
</style>